<%@ page pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='tjfxsp' /></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }

        .layui-form-label {
            width: 150px;
        }

        .layui-input-block {
            margin-left: 180px;
        }
    </style>
</head>

<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

    <div class="layui-container">

        <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

            <form:form commandName="distributionGoods" method="post">

                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='xzfxsp' /></label>
                    <div class="layui-input-block">
                        <input type="button" class="layui-btn select-goods-btn" value="选择商品">
                        <form:hidden path="goodsIds"/>
                        <table class="layui-table goods-table">
                            <tr>
                                <th><fmt:message key='spid' /></th>
                                <th><fmt:message key='spmc' /></th>
                                <th><fmt:message key='cz' /></th>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='fxbdbl' /></label>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="scale" value="${scale}">
                            <form:hidden path="guaranteeScale"/>
                        </div>
                        <div class="layui-form-mid">%</div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='fxsfw' /></label>
                    <div class="layui-input-block">
                        <input type="radio" lay-filter="distributorScope" title="<fmt:message key='qbfxs' />" name="distributorScope" value="1">
                        <input type="radio" lay-filter="distributorScope" title="<fmt:message key='zdfxs' />" name="distributorScope" value="2">
                    </div>
                </div>

                <div class="select-distributor layui-hide">

                    <div class="layui-form-item">
                        <label class="layui-form-label"><fmt:message key='xzzdfxs' /></label>
                        <div class="layui-input-block">
                            <input type="button" class="layui-btn select-distributor-btn" value="<fmt:message key='xzfxs' />">
                            <form:hidden path="distributorIds"/>
                            <table class="layui-table distributor-table">
                                <thead>
                                <tr>
                                    <th><fmt:message key='fxsid' /></th>
                                    <th><fmt:message key='fxspmc' /></th>
                                    <th><fmt:message key='fxssjhm' /></th>
                                    <th><fmt:message key='fxsdj' /></th>
                                    <th><fmt:message key='kqwd' /></th>
                                    <th><fmt:message key='cz' /></th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <input type="button" value="<fmt:message key='qd' />" id="submit" class="layui-btn">
                    </div>
                </div>

            </form:form>
        </div>
    </div>
</div>

<form action="${web_domain}/upload/image" method="post" id="upload-image-form" enctype="multipart/form-data" class="layui-hide">
    <input id="upload-image-file" name="file" type="file"/>
</form>

<script>

    layui.use(['form', 'layer'], function () {

        var layer = layui.layer;
        var form = layui.form;

        $(".select-goods-btn").click(function () {
            layer.open({
                type: 2,
                title: '<fmt:message key='xzsp' />',
                content: "${web_domain}/distributor/goods/selectGoods",
                area: ["90%", "90%"],
                btn: ["<fmt:message key='qd' />", "<fmt:message key='qx' />"],
                yes: function (index, layero) {
                    var goods = layero.find('iframe').contents().find("input.feijin-check:checked");
                    goods.each(function (index, item) {
                        var id = item.getAttribute("data-id");
                        if ($("#" + id).length === 0) {
                            var name = item.getAttribute("data-name");
                            $(".goods-table").append('<tr id="' + id + '"><td>' + id + '</td><td>' + name + '</td><td><input type="button" class="layui-btn layui-btn-danger layui-btn-xs remove-goods" data-id="' + id + '" value="<fmt:message key='sc' />"></td></tr>');
                        }
                    });
                    layer.close(index);
                }
            });
        });

        $(".select-distributor-btn").click(function () {
            layer.open({
                type: 2,
                content: "${web_domain}/distributor/goods/selectDistributor",
                area: ["90%", "90%"],
                btn: ["<fmt:message key='qd' />", "<fmt:message key='qx' />"],
                yes: function (index, layero) {
                    var goods = layero.find('iframe').contents().find("input.feijin-check:checked");
                    goods.each(function (index, item) {
                        var id = item.getAttribute("data-id");
                        if ($("#" + id).length === 0) {
                            var name = item.getAttribute("data-name");
                            var mobile = item.getAttribute("data-mobile");
                            var level = item.getAttribute("data-level");
                            var microShop = item.getAttribute("data-micro-shop");

                            $(".distributor-table").append('<tr id="' + id + '"><td>' + id + '</td><td>' + name + '</td><td>' + mobile + '</td><td>' + level + '</td><td>' + microShop + '</td><td><input type="button" class="layui-btn layui-btn-danger layui-btn-xs remove-distributor" data-id="' + id + '" value="<fmt:message key='sc' />"></td></tr>');
                        }
                    });
                    layer.close(index);
                }
            });
        });

        form.on('radio(distributorScope)', function (e) {
            if (e.value === "1") {
                $(".select-distributor").addClass("layui-hide");
            } else {
                $(".select-distributor").removeClass("layui-hide");
            }
        });

        $("body").on("click", ".remove-distributor, .remove-goods", function () {
            $(this).parent().parent().remove();
        });

        $("#submit").click(function () {

            var goodsIds = [];
            $(".goods-table tr").each(function (index, item) {
                if (item.id) {
                    goodsIds.push(item.id);
                }
            });
            if (goodsIds.length === 0) {
                layer.msg("<fmt:message key='qxzsp' />");
                return;
            }
            $("#goodsIds").val(goodsIds.join(";"));


            if ($("input[name='distributorScope']:checked").val() === "2") {
                var distributorIds = [];
                $(".distributor-table tr").each(function (index, item) {
                    if (item.id) {
                        distributorIds.push(item.id);
                    }
                });
                if (distributorIds.length === 0) {
                    layer.msg("<fmt:message key='qxzfxs' />");
                    return;
                }
                $("#distributorIds").val(distributorIds.join(";"));
            }

            $("#guaranteeScale").val($("#scale").val() / 100);

            $("#distributionGoods").ajaxSubmit({
                success: function (res) {
                    if (res.status) {
                        layer.alert("<fmt:message key='bccg' />", function () {
                            parent.location.reload();
                        });
                    } else {
                        layer.alert(res.message);
                    }
                }
            });
        });
    })
    ;

</script>

</body>
</fmt:bundle>
</html>